<template>
  <el-dialog title="关联商品" v-model="dialogTableVisible">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="商品编号">
        <el-input v-model="params.productId" placeholder="商品编号"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="params.title" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchGoodsData">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition" style="width: auto;">
      <div class="el-table__header-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 919px;">
          <colgroup>
            <col name="el-table_1_column_1" width="55">
            <col name="el-table_1_column_2" width="120">
            <col name="el-table_1_column_3" width="727">
            <col name="gutter" width="">
          </colgroup>
          <thead>
            <tr>
              <th colspan="1" rowspan="1" class="el-table_1_column_1 el-table-column--selection is-leaf">
                <div class="cell">
                  <input type="checkbox"
                    v-model= 'selectPageFlag'
                    @click='selectPageChange'
                  >
                </div>
              </th>
              <th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
                <div class="cell">商品编号</div>
              </th>
              <th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
                <div class="cell">商品名称</div>
              </th>
              <th class="gutter" style="width: 0px;"></th>
            </tr>
          </thead>
          </table>
      </div>
      <div class="el-table__body-wrapper">
        <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 919px;">
          <colgroup>
              <col name="el-table_1_column_1" width="55">
              <col name="el-table_1_column_2" width="120">
              <col name="el-table_1_column_3" width="727">
          </colgroup>
          <tbody>
            <tr v-for='item in tableData' :key="item.productId">
              <td class="el-table_1_column_1 el-table-column--selection">
                <label>
                  <div class="cell">
                    <input type="checkbox"
                      v-if = 'item.productId'
                      :value = 'item.productId'
                      v-model= 'curItem'
                    >
                  </div>
                </label>
              </td>
              <td class="el-table_1_column_2">
                <div class="cell">{{item.productId}}</div>
              </td>
              <td class="el-table_1_column_3">
                <div class="cell">{{item.productTitle}}</div>
              </td>
              </tr>
          </tbody>
        </table>
          <!---->
      </div>
    </div>
    <!-- 分页 -->
    <p>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-size="params.size"
        layout="total, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </p>
    <p class="btn-p">
      <el-button type="primary" @click='onSubmit'>确认</el-button>
    </p>
  </el-dialog>
</template>
<script>
  import {
    getGoodsListByIdAndTitle
  } from 'src/api/index.js'
  export default {
    props: {
      propItem: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        params: {
          title: '',
          productId: '',
          page: 1,
          size: 10
        },
        curItem: [],
        selectPageFlag: false,
        count: 0,
        dialogTableVisible: false,
        tableData: []
      }
    },
    watch: {
      tableData: {
        // 切换分页，检查selectPageFlag是否为选中状态
        deep: true,
        handler: function (val, oldVal) {
          this.selectPageFlag = this.checkSelectAll()
        }
      },
      curItem: {
        // 切换分页，检查selectPageFlag是否为选中状态
        deep: true,
        handler: function (val, oldVal) {
          this.selectPageFlag = this.checkSelectAll()
        }
      }
    },
    methods: {
      showPanel () {
        this.dialogTableVisible = true
        this.curItem = [...this.propItem]
        this.params.productId = ''
        this.params.title = ''
        this.params.page = 1
        this.fetchGoodsData()
      },
      onSubmit () {
        this.$emit('updateProduct', [...this.curItem])
        this.dialogTableVisible = false
      },
      fetchGoodsData () {
        getGoodsListByIdAndTitle({
          ...this.params
        }).then((res) => {
          let result = res.data
          if (result.code === 100) {
            this.count = result.data.count
            this.tableData = result.data.list
          }
        })
      },
      selectPageChange () {
        let tableDataArr = []
        this.tableData.forEach((item) => {
          tableDataArr.push(item.productId)
        })
        if (this.selectPageFlag) {
          // 剔除
          tableDataArr.forEach((item) => {
            let index = this.curItem.indexOf(item)
            if (index > -1) {
              this.curItem.splice(index, 1)
            }
          })
        } else {
          // 选中
          tableDataArr.forEach((item) => {
            let index = this.curItem.indexOf(item)
            if (index === -1) {
              this.curItem.push(item)
            }
          })
        }
      },
      cleanPageAll () {
        this.tableData.forEach((item) => {
          if (this.curItem.indexOf(item.productId) === -1) {
            this.curItem.push(item.productId)
          }
        })
      },
      handleCurrentChange (currentPage) {
        this.params.page = currentPage
        this.fetchGoodsData()
      },
      selectable (row, index) {
        return 'checked'
      },
      checkSelectAll () {
        let flag = 1
        let arr = this.tableData
        for (let i = 0, len = arr.length; i < len; i++) {
          if (this.curItem.indexOf(arr[i].productId) === -1) {
            flag = 0
            break
          }
        }
        return !!flag
      }
    }
  }
</script>
<style>
  .btn-p{
    text-align: center;
  }
</style>
